<template>
	<div class="shopcart-container">
		<!-- 收货地址区域 -->
		<van-cell title="收货地址" is-link :to="{ name:'addressList',params:{addressId:address.id}}">
			<template #label>
				<van-row>姓名：{{address.name}}</van-row>
				<van-row>电话：{{address.tel}}</van-row>
				<van-row>地址：{{address.city + address.county + address.address_detail}}</van-row>
			</template>
		</van-cell>

		<!-- 商品列表 -->
		<van-card v-for="item in productList" :key="item.id" :title="item.name" :desc="item.title"
			:thumb="APIDomainName + item.pic" :price="item.price" :num="item.count" />

		<!-- 配送信息 -->
		<van-cell title="配送服务" label="快递运输,工作日、双休日与节假日均可送货" />

		<!-- 订单备注 -->
		<van-field v-model="remark" rows="2" autosize label="订单备注" type="textarea" placeholder="请输入订单备注" />

		<!-- 商品金额 -->
		<van-cell title="商品金额" :value="`¥${amount.toFixed(2)}`" />
		<!-- 运费 -->
		<van-cell title="运费" :value="`¥0.00`" />
		<!-- 总价 -->
		<van-cell title="总价" :value="`¥${amount.toFixed(2)}`" />

		<!-- 创建订单按钮 -->
		<van-button type="primary" size="large" @click="onClickCreateOrder">创建订单</van-button>
	</div>
</template>

<script>
	//获取地址
	import {
		getDefaultAddressAPI
	} from "@/api/address.js";
	//商品列表
	import {
		getCartListCheckedAPI
	} from "@/api/cart.js";

	//创建订单
	import {
		createOrderAPI
	} from "@/api/order.js";

	export default {
		name: "orderCreate",
		data() {
			return {
				address: {}, //地址对象
				productList: [], //商品列表
				remark: "", //备注
			}
		},

		created() {

			//通过路由传参 addressList 转来的
			if (this.$route.params.addressId) {
				this.address.id = this.$route.params.addressId;
			}

			//获取默认收货地址
			getDefaultAddressAPI(this.address.id).then(result => {
				if (result.data.length > 0) {
					this.address = result.data[0]; //
				} else {
					this.$toast("请先添加收货地址");
					//跳转收货地址列表中去选择地址
					this.$router.push({
						name: "addressList",
						params: {
							addressId: null
						},
					})
				}
			});
			//获取购物车勾选商品
			getCartListCheckedAPI().then(result => {
				console.log(result.data);
				this.productList = result.data;
			})
		},

		computed: {
			//计算总金额
			amount() {
				let total = 0;
				this.productList.forEach(item => {
					total += item.count * item.price;
				});
				return total;
			}
		},

		methods: {
			//处理创建订单
			onClickCreateOrder() {
				// this.$toast("创建订单，待完成...");
				//准备参数
				let productList = []; //商品列表
				this.productList.forEach(item => {
					productList.push({
						product_id: item.product_id,
						count: item.count,
						price: item.price,
					});
				});

				let params = { //参数结构 参见API接口文档
					address_id: this.address.id,
					remark: this.remark,
					productList: productList,
				}
				//调用API接口，创建订单
				createOrderAPI(params).then(result => {
					//显示API调用返回信息，具体参见接口文档
					this.$toast(result.msg);
					//创建成功后导航到订单列表页面
					this.$router.push({
						name: "orderList"
					});
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	.shopcart-container {
		display: flex;
		flex-direction: column;
		background: #eee;
		overflow: hidden;

		// 收货地址
		.address-container {
			background-color: #f5f5f5;
			margin: 0;
			padding: 10px;
		}
	}

	.van-card__title {
		font-size: 16px;
	}
</style>
